<template>
  <TyDragTab
    :tab-opt="tabOpt"
    :show-add="showAdd"
    :sortable="sortable"
    v-loading="tabLoading"
    @add="handleAdd"
    @dragStart="handleDragStart"
    @dragEnd="handleDragEnd"
    @tabChange="handleTabchange"
    :beforeLeave="handleTabLeave"
    :emptyText="$t('basic.label.emptyTab')"
    ref="dragTabRef"
  >
    <template v-for="(item, itemIndex) in tabOpt.list" :key="item.value" #[`${item.value}_header`]>
      <div style="display: flex">
        <em :class="item.iconClass" v-if="item.iconClass" class="tab-icon font-14"></em>
        {{ $t(`${item.label}`) || item.label }}
        <template v-if="item.type === 'custom'">
          <ty-plm-dropdown
            v-bind="item.dropdownOptions"
            :ref="el => (dropdownRef[item.value] = el)"
            @visible-change="visible => handleDropdownVisible(visible, item.value)"
            @command="value => handleSelect(value, item)"
          >
            <template #dropdownItem="{ data }">
              <ty-plm-popover
                v-bind="
                  {
                    ...data.popoverOptions,
                    confirmCallback: close => handlePopoverConfirm(close, item, itemIndex, data),
                    cancelCallback: close => handlePopoverConfirm(close, item)
                  } || { disabled: true }
                "
                v-if="data.popoverInnerComponent && showPopover"
              >
                <component
                  :is="data.popoverInnerComponent"
                  v-bind="getBindOption(data)"
                  ref="popoverInnerComponentRef"
                ></component>
                <template #reference>
                  <span style="width: 100%; padding: 0 8px">
                    <em :class="data.iconClass"></em>
                    {{ data.label }}
                  </span>
                </template>
              </ty-plm-popover>
              <template v-else>
                <span style="width: 100%; padding: 0 8px">
                  <em :class="data.iconClass"></em>
                  {{ data.label }}
                </span>
              </template>
            </template>
          </ty-plm-dropdown>
        </template>
      </div>
    </template>
    <template v-for="item in tabOpt.list" #[item.value] :key="item.value">
      <anchor-content
        :ref="el => (anchorContentRef[item.value + 'anchor_content_ref'] = el)"
        :treeObj="treeObj"
        :tabInfo="item"
        v-loading="tabContentLoading"
        @updateTabInfo="handleUpdateTabInfo"
      >
        <!-- modify by lifs 2024/09/04 通用附件的读写与工艺对象的权限和检出状态联动控制 -->
        <component
          v-if="item.componentList && item.componentList.length"
          :is="getContainerComponent(item)"
          :ref="el => setComponentRef(el, item.value)"
          :tabInfo="item.componentList"
          :isDisabled="isDisabled"
          :treeObj="treeObj"
          :treeRef="treeRef"
          :dataDetail="dataDetail"
          :extendObj="extendObj"
          v-bind="$attrs"
        ></component>
      </anchor-content>
    </template>
  </TyDragTab>
</template>
<script setup>
import TyDragTab from '@/ty-ui/lib/ty-tab/tysrc/ty-drag-tab.vue';
import anchorContent from './anchor-content';
import { useTabEditor, createProps, createEmits, useOverride } from './composables/tab-editor.js';
const props = defineProps(createProps());
const emits = defineEmits(createEmits());
const {
  $route,
  $attrs,
  tabLoading,
  dragTabRef,
  dropdownRef,
  popoverInnerComponentRef,
  anchorContentRef,
  tabContentLoading,
  activeTab,
  tabComponentRef,
  tabOpt,
  showPopover,
  handleTabchange,
  handleTabLeave,
  getContainerComponent,
  getBindOption,
  handleAdd,
  handleSelect,
  handleDropdownVisible,
  handlePopoverConfirm,
  handleDragStart,
  handleDragEnd,
  handleUpdateTabInfo,
  setComponentRef
} = (useOverride || useTabEditor)(props, emits);
defineExpose({
  dragTabRef,
  activeTab,
  tabOpt,
  anchorContentRef,
  tabComponentRef,
  handleTabchange
});
</script>
<style lang="scss">
.tab-dropdown-popper-class {
  padding: 12px;
  &.el-popper[x-placement^='right'] {
    margin-left: 10px !important;
  }
  &.el-popper[x-placement^='left'] {
    margin-right: 10px !important;
  }
  .el-popper__arrow {
    display: none !important;
  }
  .ty-base-popover__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
  }
}
.tab-dropdown-span {
  .el-dropdown-menu__item {
    // modify by lifs 2024/11/01 选项卡组件下拉按钮样式调整
    padding: 0 12px;
    height: 32px;
    > span {
      width: 100%;
      display: inline-flex;
      em {
        margin-right: 8px;
      }
    }
  }
}
.el-popper.el-dropdown__popper.tab-dropdown-span {
  .el-scrollbar {
    overflow: visible;
    .el-scrollbar__wrap.el-scrollbar__wrap--hidden-default {
      overflow: visible;
    }
  }
}
</style>
<style lang="scss" scoped>
:deep(.el-tab-pane) {
  height: 100%;
}
.tab-icon {
  margin-right: 4px;
}
:deep(.el-tabs__nav-next),
:deep(.el-tabs__nav-prev) {
  line-height: 40px;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 0 20px 4px #e7e7e7;
  background: #fff;
  z-index: 3;
  border: 1px solid #d9d9d9;
  border-top: none;
  color: #909399;
  i {
    font-size: 14px;
  }
}
.ty-drag-tab {
  background-color: #fff;
  z-index: 10;
  position: relative;
  :deep(.ty-ui-base-tab) {
    .el-tabs {
      .el-tabs__header {
        .el-tabs__nav-scroll {
          .el-tabs__active-bar {
            display: none;
          }
        }
        // modify by lifs 2024/08/28 去掉选项卡组件首尾的分割线
        .el-tabs__nav-prev {
          border: none;
          box-shadow: unset;
        }
        .el-tabs__nav-next {
          border: none;
          box-shadow: unset;
        }
      }
      .el-tabs__content {
        height: calc(100% - 40px);
        .anchor-content {
          .component-area {
            .component--empty {
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            }
            .formRenderWrapper {
              height: 100%;
              > div {
                height: 100%;
                .empty {
                  height: 100%;
                }
              }
            }
            .craft-file-wraper {
              .el-loading-mask {
                opacity: 1;
                background-color: rgba(255, 255, 255, 1);
              }
            }
          }
        }
      }
    }
  }
  :deep(.el-loading-mask) {
    opacity: 1;
    background-color: rgba(255, 255, 255, 1);
  }
}
</style>
